<template>
	<div>
		<div class="box_top" style="display: flex">
			<div class="box_left_top" style="padding-right: 2px; min-width: 40px; max-width: 80px; height: 15px; border-bottom: 1px dashed #000; border-right: 1px dashed #000; display: flex; justify-content: flex-end; align-items: center">
				<span v-for="item in D1" :key="item" style="font-size: 12px; color: #000">{{ item.slice(1) }}</span>
			</div>
			<div class="box_right_top" style="padding-left: 2px; min-width: 40px; max-width: 80px; height: 15px; border-bottom: 1px dashed #000; display: flex; justify-content: flex-start; align-items: center">
				<span v-for="item in D2" :key="item" style="font-size: 12px; color: #000">{{ item.slice(1) }}</span>
			</div>
		</div>
		<div class="box_bottom" style="display: flex">
			<div class="box_left_bottom" style="padding-right: 2px; min-width: 40px; max-width: 80px; height: 15px; border-right: 1px dashed #000; display: flex; justify-content: flex-end; align-items: end">
				<span v-for="item in D4" :key="item" style="font-size: 12px; color: #000">{{ item.slice(1) }}</span>
			</div>
			<div class="box_right_bottom" style="padding-left: 2px; min-width: 40px; max-width: 80px; height: 15px; display: flex; justify-content: flex-start; align-items: end">
				<span v-for="item in D3" :key="item" style="font-size: 12px; color: #000">{{ item.slice(1) }}</span>
			</div>
		</div>
	</div>
</template>
<script setup>
	import { ref, onMounted, watch, h } from 'vue';
	const props = defineProps({
		//单冠
		single_crown: {
			type: String,
			default: ''
		},
		//连冠
		multiple_crown: {
			type: String,
			default: ''
		}
	});

	//监听数据
	watch(
		() => [props.single_crown, props.multiple_crown],
		() => {
			handleTeeth();
		},
		{ deep: true }
	);

	//单冠和连冠最后合并的数据
	const teeth = ref([]);
	//1区数据
	const D1 = ref([]);
	//2区数据
	const D2 = ref([]);
	//3区数据
	const D3 = ref([]);
	//4区数据
	const D4 = ref([]);

	//重置数据
	const handlReset = () => {
		teeth.value = [];
		D1.value = [];
		D2.value = [];
		D3.value = [];
		D4.value = [];
	};

	//处理牙位数据
	const handleTeeth = () => {
		//每次都先重置
		handlReset();
		//合并单冠和连冠
		teeth.value = [...props.single_crown.split(','), ...props.multiple_crown.split(',')];
		//去重
		teeth.value = teeth.value.filter((v, i, a) => a.indexOf(v) === i);
		//循环处理 筛选出各个分区数据
		//11，12，13，14，15，16，17，18属于1区
		//21，22，23，24，25，26，27，28属于2区
		//31，32，33，34，35，36，37，38属于3区
		//41，42，43，44，45，46，47，48属于4区

		teeth.value.forEach((item) => {
			let str = item.toString();
			switch (str) {
				case '11':
				case '12':
				case '13':
				case '14':
				case '15':
				case '16':
				case '17':
				case '18':
					D1.value.push(item);
					//从大到小排序
					D1.value.sort((a, b) => b - a);
					break;
				case '21':
				case '22':
				case '23':
				case '24':
				case '25':
				case '26':
				case '27':
				case '28':
					D2.value.push(item);
					break;
				case '31':
				case '32':
				case '33':
				case '34':
				case '35':
				case '36':
				case '37':
				case '38':
					D3.value.push(item);
					break;
				case '41':
				case '42':
				case '43':
				case '44':
				case '45':
				case '46':
				case '47':
				case '48':
					D4.value.push(item);
					//从大到小排序
					D4.value.sort((a, b) => b - a);
					break;
			}
		});
	};

	onMounted(() => {
		handleTeeth();
	});
</script>
<style lang="scss" scoped>
	// .box_top {
	// 	display: flex;

	// 	.box_left_top {
	// 		min-width: 100px;
	// 		max-width: 100px;
	// 		height: 30px;
	// 		border-bottom: 1px dashed #000;
	// 		border-right: 1px dashed #000;
	// 		display: flex;
	// 		justify-content: flex-end;
	// 		align-items: center;
	// 	}

	// 	.box_right_top {
	// 		min-width: 100px;
	// 		max-width: 100px;
	// 		height: 30px;
	// 		border-bottom: 1px dashed #000;
	// 		display: flex;
	// 		justify-content: flex-start;
	// 		align-items: center;
	// 	}
	// }

	// .box_bottom {
	// 	display: flex;

	// 	.box_left_bottom {
	// 		min-width: 100px;
	// 		max-width: 100px;
	// 		height: 30px;
	// 		border-right: 1px dashed #000;
	// 		display: flex;
	// 		justify-content: flex-end;
	// 		align-items: center;
	// 	}

	// 	.box_right_bottom {
	// 		min-width: 100px;
	// 		max-width: 100px;
	// 		height: 30px;
	// 		display: flex;
	// 		justify-content: flex-start;
	// 		align-items: center;
	// 	}
	// }

	// span {
	// 	font-size: 12px;
	// 	color: #000;
	// 	margin: 0 2px;
	// }
</style>
